<template>
  <el-form-item :label="label" :required="required">
    <el-select
      :model-value="modelValue"
      @update:model-value="$emit('update:modelValue', $event)"
      :placeholder="placeholder"
      :multiple="multiple"
      class="w-full"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'

interface Option {
  label: string
  value: string | number
}

const props = defineProps({
  label: { type: String, default: '下拉选择' },
  placeholder: { type: String, default: '请选择' },
  required: { type: Boolean, default: false },
  multiple: { type: Boolean, default: false },
  options: { type: Array as PropType<Option[]>, default: () => [] },
  modelValue: { type: [String, Number, Array], default: '' }
})

const emit = defineEmits(['update:modelValue'])

const updateValue = (value: string | number | Array<string | number>) => {
  emit('update:modelValue', value)
}
</script> 